<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>调试页面 - 任务管理系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        .debug-section {
            margin-bottom: 2rem;
            padding: 1rem;
            border: 1px solid #dee2e6;
            border-radius: 0.375rem;
        }
        .debug-title {
            color: #0d6efd;
            border-bottom: 2px solid #0d6efd;
            padding-bottom: 0.5rem;
            margin-bottom: 1rem;
        }
        .json-data {
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 0.375rem;
            padding: 1rem;
            font-family: 'Courier New', monospace;
            font-size: 0.875rem;
            white-space: pre-wrap;
            max-height: 400px;
            overflow-y: auto;
        }
        .api-test {
            background-color: #e7f3ff;
            border-left: 4px solid #0d6efd;
            padding: 1rem;
            margin: 1rem 0;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container">
            <a class="navbar-brand" th:href="@{/}">
                <i class="bi bi-bug"></i> 调试页面
            </a>
            <div class="navbar-nav ms-auto">
                <a class="nav-link" th:href="@{/}">返回首页</a>
            </div>
        </div>
    </nav>

    <!-- 主要内容区域 -->
    <main class="container mt-4">
        <div class="row">
            <div class="col-12">
                <h1 class="mb-4">
                    <i class="bi bi-bug-fill text-primary"></i> 
                    后端数据调试页面
                </h1>
                <p class="lead text-muted">
                    此页面用于调试和测试后端接口，直接显示数据库中的真实数据，无需JavaScript加载。
                </p>
            </div>
        </div>

        <!-- 系统统计 -->
        <div class="debug-section">
            <h2 class="debug-title">
                <i class="bi bi-graph-up"></i> 系统统计
            </h2>
            <div class="row">
                <div class="col-md-3">
                    <div class="card bg-primary text-white">
                        <div class="card-body text-center">
                            <h3 th:text="${totalTasks ?: 0}">0</h3>
                            <p class="mb-0">总任务数</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card bg-success text-white">
                        <div class="card-body text-center">
                            <h3 th:text="${totalRequirements ?: 0}">0</h3>
                            <p class="mb-0">总需求数</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card bg-warning text-white">
                        <div class="card-body text-center">
                            <h3 th:text="${totalProjects ?: 0}">0</h3>
                            <p class="mb-0">总项目数</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card bg-info text-white">
                        <div class="card-body text-center">
                            <h3 th:text="${totalDevelopers ?: 0}">0</h3>
                            <p class="mb-0">总开发者数</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 开发者数据 -->
        <div class="debug-section">
            <h2 class="debug-title">
                <i class="bi bi-people"></i> 开发者数据
            </h2>
            <div class="api-test">
                <strong>API接口:</strong> GET /api/developers
            </div>
            <div th:if="${developers != null and !developers.isEmpty()}">
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>姓名</th>
                                <th>角色</th>
                                <th>状态</th>
                                <th>创建时间</th>
                                <th>更新时间</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr th:each="developer : ${developers}">
                                <td th:text="${developer.id}">1</td>
                                <td th:text="${developer.name}">张三</td>
                                <td th:text="${developer.role}">DEVELOPER</td>
                                <td th:text="${developer.status}">ACTIVE</td>
                                <td th:text="${developer.createdAt != null ? #temporals.format(developer.createdAt, 'yyyy-MM-dd HH:mm') : 'N/A'}">2024-01-01 10:00</td>
                                <td th:text="${developer.updatedAt != null ? #temporals.format(developer.updatedAt, 'yyyy-MM-dd HH:mm') : 'N/A'}">2024-01-01 10:00</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div th:if="${developers == null or developers.isEmpty()}" class="alert alert-warning">
                <i class="bi bi-exclamation-triangle"></i> 暂无开发者数据
            </div>
        </div>

        <!-- 项目数据 -->
        <div class="debug-section">
            <h2 class="debug-title">
                <i class="bi bi-folder"></i> 项目数据
            </h2>
            <div class="api-test">
                <strong>API接口:</strong> GET /api/projects
            </div>
            <div th:if="${projects != null and !projects.isEmpty()}">
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>项目名称</th>
                                <th>描述</th>
                                <th>状态</th>
                                <th>经理ID</th>
                                <th>创建时间</th>
                                <th>更新时间</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr th:each="project : ${projects}">
                                <td th:text="${project.id}">1</td>
                                <td th:text="${project.name}">项目名称</td>
                                <td th:text="${project.description}">项目描述</td>
                                <td th:text="${project.status}">ACTIVE</td>
                                <td th:text="${project.managerId}">1</td>
                                <td th:text="${project.createdAt != null ? #temporals.format(project.createdAt, 'yyyy-MM-dd HH:mm') : 'N/A'}">2024-01-01 10:00</td>
                                <td th:text="${project.updatedAt != null ? #temporals.format(project.updatedAt, 'yyyy-MM-dd HH:mm') : 'N/A'}">2024-01-01 10:00</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div th:if="${projects == null or projects.isEmpty()}" class="alert alert-warning">
                <i class="bi bi-exclamation-triangle"></i> 暂无项目数据
            </div>
        </div>

        <!-- 需求数据 -->
        <div class="debug-section">
            <h2 class="debug-title">
                <i class="bi bi-file-text"></i> 需求数据
            </h2>
            <div class="api-test">
                <strong>API接口:</strong> GET /api/requirements
            </div>
            <div th:if="${requirements != null and !requirements.isEmpty()}">
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>标题</th>
                                <th>描述</th>
                                <th>状态</th>
                                <th>优先级</th>
                                <th>项目ID</th>
                                <th>负责人ID</th>
                                <th>创建时间</th>
                                <th>更新时间</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr th:each="requirement : ${requirements}">
                                <td th:text="${requirement.id}">1</td>
                                <td th:text="${requirement.title}">需求标题</td>
                                <td th:text="${requirement.description}">需求描述</td>
                                <td th:text="${requirement.status}">ACTIVE</td>
                                <td th:text="${requirement.priority}">HIGH</td>
                                <td th:text="${requirement.projectId}">1</td>
                                <td th:text="${requirement.ownerId}">1</td>
                                <td th:text="${requirement.createdAt != null ? #temporals.format(requirement.createdAt, 'yyyy-MM-dd HH:mm') : 'N/A'}">2024-01-01 10:00</td>
                                <td th:text="${requirement.updatedAt != null ? #temporals.format(requirement.updatedAt, 'yyyy-MM-dd HH:mm') : 'N/A'}">2024-01-01 10:00</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div th:if="${requirements == null or requirements.isEmpty()}" class="alert alert-warning">
                <i class="bi bi-exclamation-triangle"></i> 暂无需求数据
            </div>
        </div>

        <!-- 任务数据 -->
        <div class="debug-section">
            <h2 class="debug-title">
                <i class="bi bi-list-task"></i> 任务数据
            </h2>
            <div class="api-test">
                <strong>API接口:</strong> GET /api/tasks
            </div>
            <div th:if="${tasks != null and !tasks.isEmpty()}">
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>标题</th>
                                <th>描述</th>
                                <th>状态</th>
                                <th>优先级</th>
                                <th>级别</th>
                                <th>进度</th>
                                <th>预估工时</th>
                                <th>实际工时</th>
                                <th>需求ID</th>
                                <th>负责人ID</th>
                                <th>父任务ID</th>
                                <th>创建时间</th>
                                <th>更新时间</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr th:each="task : ${tasks}">
                                <td th:text="${task.id}">1</td>
                                <td th:text="${task.title}">任务标题</td>
                                <td th:text="${task.description}">任务描述</td>
                                <td th:text="${task.status}">TODO</td>
                                <td th:text="${task.priority}">MEDIUM</td>
                                <td th:text="${task.level}">STORY</td>
                                <td th:text="${task.progress + '%'}">0%</td>
                                <td th:text="${task.estimatedHours != null ? task.estimatedHours + 'h' : 'N/A'}">8.0h</td>
                                <td th:text="${task.actualHours != null ? task.actualHours + 'h' : 'N/A'}">0.0h</td>
                                <td th:text="${task.requirementId}">1</td>
                                <td th:text="${task.assigneeId ?: 'N/A'}">1</td>
                                <td th:text="${task.parentTaskId ?: 'N/A'}">N/A</td>
                                <td th:text="${task.createdAt != null ? #temporals.format(task.createdAt, 'yyyy-MM-dd HH:mm') : 'N/A'}">2024-01-01 10:00</td>
                                <td th:text="${task.updatedAt != null ? #temporals.format(task.updatedAt, 'yyyy-MM-dd HH:mm') : 'N/A'}">2024-01-01 10:00</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div th:if="${tasks == null or tasks.isEmpty()}" class="alert alert-warning">
                <i class="bi bi-exclamation-triangle"></i> 暂无任务数据
            </div>
        </div>

        <!-- API测试链接 -->
        <div class="debug-section">
            <h2 class="debug-title">
                <i class="bi bi-link-45deg"></i> API测试链接
            </h2>
            <div class="row">
                <div class="col-md-6">
                    <div class="list-group">
                        <a href="/api/developers" class="list-group-item list-group-item-action" target="_blank">
                            <i class="bi bi-people"></i> GET /api/developers
                        </a>
                        <a href="/api/projects" class="list-group-item list-group-item-action" target="_blank">
                            <i class="bi bi-folder"></i> GET /api/projects
                        </a>
                        <a href="/api/requirements" class="list-group-item list-group-item-action" target="_blank">
                            <i class="bi bi-file-text"></i> GET /api/requirements
                        </a>
                        <a href="/api/tasks" class="list-group-item list-group-item-action" target="_blank">
                            <i class="bi bi-list-task"></i> GET /api/tasks
                        </a>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="alert alert-info">
                        <h5><i class="bi bi-info-circle"></i> 使用说明</h5>
                        <ul class="mb-0">
                            <li>点击左侧链接可以直接访问API接口</li>
                            <li>返回的是JSON格式的原始数据</li>
                            <li>可以用于验证后端接口是否正常工作</li>
                            <li>如果接口返回错误，请检查后端服务状态</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-light mt-5 py-4">
        <div class="container text-center">
            <p class="text-muted mb-0">
                &copy; 2024 任务管理系统调试页面 | 用于开发和测试
            </p>
        </div>
    </footer>

    <!-- JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>